<!DOCTYPE HTML>
<html>
<head>
<title>Paner testing html5 Aa!</title>
    <link rel="stylesheet" type="text/css" href="../../Main.css" />
    <script src="../Javascript/Main.js"></script>
<script>
    var menuItems;

    function canvasClicked(canvas) {
        showMenu();
        drawClickedMenuItem(canvas);
    }

    function showMenu() {
        for (var i = 0;i<menuItems.length;i++) {
            drawMenuItem(menuItems[i]);
        }
    }
	
	function allowDrop(ev)
    {
        ev.preventDefault();
    }

    function drag(ev)
    {
        ev.dataTransfer.setData("canvasToDrop", ev.target.id);
    }

function drop(ev)
{
	var divTobeDropped;
	var canvasToDrop;
	var cameFrom;
	var canvasToSendBack;

	if(document.getElementById(ev.target.id).tagName=="CANVAS") {
		divTobeDropped = document.getElementById(ev.target.id).parentNode.id;
		canvasToSendBack = ev.target.id;
	}
	else {
		divTobeDropped = ev.target.id;
		canvasToSendBack = document.getElementById(divTobeDropped).getElementsByTagName("canvas")[0].id;
	}
		
	
	ev.preventDefault();
	canvasToDrop = ev.dataTransfer.getData("canvasToDrop");
	cameFrom = document.getElementById(canvasToDrop).parentNode.id;
	document.getElementById(divTobeDropped).appendChild(document.getElementById(canvasToDrop));
	
	document.getElementById(cameFrom).appendChild(document.getElementById(canvasToSendBack));
}
	
</script>
</head>
<body>
<div class="clearfix">
    <ul>
        <li>
            <div id="canvasDiv1" ondrop="drop(event)" ondragover="allowDrop(event)" style="border: 3px coral solid;">
                <canvas draggable="true" ondragstart="drag(event)" id="HomeMenu" onclick="canvasClicked(this)" class="myCanvas" width="150" height="50" data-name="Home">
                    Your browser does not support the HTML5 canvas tag.</canvas>
            </div>
        </li>
        <li>
            <div id="canvasDiv2" ondrop="drop(event)" ondragover="allowDrop(event)" style="border: 3px coral solid;">
                <canvas draggable="true" ondragstart="drag(event)" id="2Menu" onclick="canvasClicked(this)" class="myCanvas" width="150" height="50" data-name="Second">
                    Your browser does not support the HTML5 canvas tag.</canvas>
            </div>
        </li>
        <li>
            <div id="canvasDiv3" ondrop="drop(event)" ondragover="allowDrop(event)" style="border: 3px coral solid;">
                <canvas draggable="true" ondragstart="drag(event)" id="3Menu" onclick="canvasClicked(this)" class="myCanvas" width="150" height="50" data-name="About Us">
                    Your browser does not support the HTML5 canvas tag.</canvas>
            </div>
        </li>
        <li>
            <div id="canvasDiv4" ondrop="drop(event)" ondragover="allowDrop(event)" style="border: 3px coral solid;">
                <canvas draggable="true" ondragstart="drag(event)" id="4Menu" onclick="canvasClicked(this)" class="myCanvas" width="150" height="50" data-name="Map re gav gav">
                    Your browser does not support the HTML5 canvas tag.</canvas>
            </div>
        </li>
    </ul>
</div>
<script>

    menuItems = new Array(document.getElementById("HomeMenu"),
            document.getElementById("2Menu"),document.getElementById("3Menu"),document.getElementById("4Menu"));

    showMenu();
</script>

</body>
</html>